本日先進行 component 內的 props初探，了解 component 如何與外面的資料進行互動，使每個物件都可以順利的把資料傳入作用。

建立第一版 component

根據官方範本，製作出一個 .jsx 檔案，在這個檔案中有個 function 叫做 Welcome，且有帶著參數 props 。在這個 props 中有個 name的屬性。

function Welcome(props) {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  );
}

export default Welcome;

完成了物件後，開始在外面實作。首先跟之前一樣，定義好要執行的 ReactDOM 物件，並且實作 Welcome 這個component。接著再做個屬性為「name」 的 props.name，並且把參數傳入，並且命名為 props，在.jsx 內就可以使用。

const root13 = ReactDOM.createRoot(document.getElementById("root"));
root13.render(<Welcome name="Eyelash" />);

結果如圖：

參考資訊

另外先前沒有詳細說明 js 和 jsx 的關係，未來有機會再敘述一下。

• Components and Props